<template>
	<view class="box">
		<view class="head">
			<view class="iconfont icon-xiangzuo"></view>
			<view class="search" @click="search()">
				<image class="search_icon" src="../../static/images/shq_search.png"></image>
				<text>咪购</text>
			</view>
		</view>
		<view class="merchant_information">
			<image src="../activity/static/images/no_product.png"></image>
			<text class="information_name">星期六ST&SAT</text>
			<text class="information_num">共4567件商品</text>
		</view>
		<view class="classify" id="classify" :class="{'classifyFixed' : classifyFixed == true}">
			<scroll-view class="scroll1" scroll-x="true">
				<view 
					class="classify_item" 
					v-for="(item,index) in classifyList"
					:key="index"
					@click="classifyCheck(item.classify)"
				>
					<view class="itemBox">
						<text 
							class="itemBox_title" 
							:class="{'itemBoxCheck_title':classifyActive == item.classify}"
						>{{item.title}}</text>
						<text 
							class="itemBox_type" 
							:class="{'itemBoxCheck_type':classifyActive == item.classify}"
							>{{item.type == 1 ? '秒杀' : (item.type == 2 ? '特卖价' : '一口价')}}</text>
					</view>
				</view>
				<!-- <view class="classify_item">
					<view class="itemBox">
						<text class="itemBox_title" :class="{'itemBoxCheck_title':classifyActive == 1}">流行男鞋</text>
						<text class="itemBox_type" :class="{'itemBoxCheck_type':classifyActive == 1}">秒杀</text>
					</view>
				</view> -->
				
				
			</scroll-view>
		</view>
		<view class="other" :class="{'otherFixed' : classifyFixed == true}">
			<view class="other_information">
				<view class="businessLicense">
					<image src="../../static/images/merchant_marketing_authentication.png"></image>
					<text>营业执照</text>
				</view>
				<view class="countDown">
					<image src="../../static/images/merchant_marketing_timepiece.png"></image>
					<text class="countDownTitle">距结束<text class="countDownText">02</text>天<text class="countDownText">16</text>时<text class="countDownText">58</text>分</text>
				</view>
			</view>
			<view class="serviceBox">
				<view class="Basics">
					<view class="shipmentsBox" @click="toggle()">
						<text class="serviceTitle">发货</text>
						<text class="serviceContent">预计12月26日于开始发货，如遇疫情、政策、恶劣天气等不可控因素影响，部分订单发货可能会有延迟，敬请谅解。(中国内地配送及包邮，中国港澳台以下单时为准)</text>
						<image class="serviceIcon" src="../../static/images/shq_right.png"></image>
					</view>
					<view class="serveBox">
						<text class="serviceTitle">服务</text>
						<text class="serviceType">支持七天无理由</text>
					</view>
				</view>
				<view class="activityBox" v-if="activityShow">
					<view style="width: 100%; height: 22px; float: left;">
						<text class="serviceTitle">活动</text>
						<text class="activityType">秒杀</text>
						<text class="activityContent">本场活动部分商品参加限时秒杀!
1、用户在秒杀时间内下单成交，用户可获得秒杀低价优惠，秒杀时间结束后，商品会恢复正常价格。
2、限时秒杀商品预估秒杀剩余时间，但是在秒杀剩余时间 内不保证一定能购买到秒杀价商品。秒杀商品存在被用户 抢光导致私杀结束的情况，倒计时功能不保证在时限范围 内一定能够买到秒杀商品，建议及早下单购买。
3、秒杀商品需支付成功后才算秒杀成功。
4、秒杀商品具有限购次数限制，同一注册用户中超出限购 次数的商品会以原价购买.
5、限时秒杀商品在秒杀期间，不支持与优惠券叠加使用</text>
						<image class="serviceIcon" src="../../static/images/shq_right.png"></image>
					</view>
				</view>
			</view>
		</view>
		
		<view class="sortBox" :class="{'sortFixed' : sortBoxFixed == true}">
			<view 
				class="sortItem" 
				:class="{'sortCheck' : sortActive == item.id}"
				v-for="(item,index) in sortList"
				:key="index"
				@click="sortCheck(item.id,item.type)"
			>
				<text>{{item.title}}</text>
				<view class="sortItem_icon" v-if="item.type == 2">
					<image :src="priceIconImagesList[priceType]"></image>
				</view>
			</view>
		</view>
		<!-- 组件 -->
		
		<view class="content" id="content" :class="{'contentFixed' : sortBoxFixed == true}">
			<goodsList :wfList='hostProduct'  :addCart="true" @itemTap="goDetail" @addCat="selecAttr" :type="0"></goodsList>
			
			<!-- <uni-load-more status="loading"></uni-load-more> -->
		</view>
		<!-- 普通弹窗 -->
		<uni-popup ref="popup" background-color="#fff" border-radius="20px 20px 0px 0px">
			<view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }">
				<text class="popup_content_title">发货说明</text>
				<text class="popup_content_content">预计12月26日于开始发货，如遇疫情、政策、恶劣天气等不可控因素影响，部分订单发货可能会有延迟，敬请谅解。(中国内地配送及包邮，中国港澳台以下单时为准)</text>
				<button class="popup_content_button" @click="closePopup()">我知道了</button>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import goodsList from './component/goodsList.vue'
	import { storeMerchantList, getGeocoder ,getProductslist, getProductHot, storeCategory } from '@/api/store.js';
	
	export default {
		components:{
			goodsList
		},
		data(){
			return {
				classifyActive:1,
				sortActive:1,
				priceType:1,
				type:'bottom',
				classifyList:[
					{classify:1,title:'童鞋',type:1},
					{classify:2,title:'流行男鞋',type:2},
					{classify:3,title:'时尚女鞋',type:3},
					{classify:4,title:'3C数码',type:1},
					{classify:5,title:'时尚女装',type:3},
					{classify:6,title:'彩妆',type:2},
					{classify:7,title:'日用百货',type:3}
				],
				sortList:[
					{id:1,title:'综合',type:1},
					{id:2,title:'销量',type:1},
					{id:3,title:'上新',type:1},
					{id:4,title:'价格',type:2},
				],
				priceIconImagesList:{
					1:"../../static/images/merchant_marketing_xsj.png",
					2:"../../static/images/merchant_marketing_ssj.png"
					
				},
				classifyFixed:false,
				sortBoxFixed:false,
				activityShow:true,
				
				hostProduct: [],
				hotPage: 1,
				hotLimit: 30,
				hotScroll: true,
				hotLoading: false,
				hotTitle: '加载更多',
			}
		},
		mounted(){
			this.get_host_product();
		},
		onPageScroll(e)
		{
			let classifyTop = this.activityShow == true ? 367.5 : 314.5;
			let sortBoxTop = 193.5;
			// 获取可视区域的高度
			const windowHeight = uni.getSystemInfoSync().windowHeight;
			// let sortBoxTop = this.activityShow == true ? 193.5 : 150.5;
			const query = uni.createSelectorQuery().in(this);
			query.select("#content").boundingClientRect((data)=>{
				
				if(data.top <= classifyTop)
				{
					this.classifyFixed = true;
				}
				if(data.top > classifyTop)
				{
					this.classifyFixed = false;
				}
				if(data.top <= sortBoxTop)
				{
					this.sortBoxFixed = true;
				}
				if(data.top > sortBoxTop)
				{
					this.sortBoxFixed = false;
				}
				// 计算view底部距离可视区底部的距离
				let distanceToBottom = windowHeight - data.bottom;
				if(distanceToBottom >= 0)
				{
					this.get_host_product();
				}
			}).exec();
			// 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件
			uni.$emit('scroll');
		},
		methods:{
			get_host_product: function() {
				// console.log('get_host_product')
				let that = this;
				let num = that.hotLimit;
				if (!that.hotScroll) return;
				if (that.hotLoading) return;
				that.hotLoading = true;
				that.hotTitle = '';
				getProductHot(that.hotPage, that.hotLimit).then(res => {
					console.log('res',res)
					let list = res.data.list;
					let productList = that.$util.SplitArray(list, that.hostProduct);
					let hotScroll = list.length <= num && list.length != 0;
					that.hotScroll = hotScroll;
					that.hotLoading = false;
					that.hotTitle = !hotScroll ? '已全部加载' : '加载更多';
					that.$set(that, 'hostProduct', productList);
					that.$set(that, 'hotPage', that.hotPage + 1);
				});
			},
			goDetail(item){
				console.log('goDetail',item)
				uni.navigateTo({
					url: '/pages/livecircle/merdetail?mer_id='+item.mer_id
				});
				
			},
			/**
			 * 打开属性插件
			 */
			selecAttr: function(item) {
				let that = this;
				let type = item.product ? item.product.type : item.type
				if((item.product_type == 0 && type != 0) || item.product_type > 0){
					that.goDetail(item)
				}else{
					that.storeInfo = item;
					util.getProductSpecs(item.spu_id,function(data){
						that.$set(that, "attr", data.attr);
						that.$set(that.attr.productSelect,"store_name",item.store_name);
						that.$set(that, 'productValue', data.productValue);
						that.$set(that, "attrValue", data.attrValue);
						that.$set(that.attr, 'cartAttr', true);
						that.$set(that, 'isOpen', true);
					})
				}
			},
			classifyCheck(ob)
			{
				this.classifyActive = ob;
			},
			sortCheck(id,type)
			{
				if(type == 2){
					if(this.sortActive == id){
						//带内部排序
						this.priceType = this.priceType == 1 ? 2 : 1;
					}
				}
				this.sortActive = id;
			},
			toggle(type) {
				this.type = 'bottom'
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$refs.popup.open('bottom')
			},
			closePopup()
			{
				this.$refs.popup.close()
			}
		}
	}
</script>

<style>
.box{background-color: #f4f5f4; position: relative; top:0rpx; left: 0rpx; right: 0rpx; bottom: 0rpx;}
.head{width: 100%; height: 105rpx; background-color: #fe0e2f; border-bottom: 2rpx solid #fe0e2f; z-index: 9999; position: fixed; top: 0rpx;}
.icon-xiangzuo:before { content: "\ebbc"; color:#fff; font-size: 42rpx; position: absolute; margin-left: 17.5rpx; margin-top: 31.5rpx;}
.search{width: calc(100% - 105rpx); float: right; height: 73.5rpx;  margin-top:15.75rpx;background-color: #ffffff; display: flex; align-items: center; margin-right:17.5rpx;  border-radius: 17.5rpx;}
.search_icon{width: 35rpx; height: 35rpx; margin:0rpx 9rpx 0px 26.25rpx}
.search text{color: #969696;}

.merchant_information{width: 100%; height: 315rpx; background-color: #fe0e2f; float: left; padding-top:105rpx ;}
.merchant_information image{width: 122.5rpx; height: 122.5rpx;float: left; margin-top: 44rpx; margin-left: 44rpx; border-radius: 14rpx;}
.information_name{width: calc(100% - 228rpx); margin-left: 17.5rpx; height: 70rpx; float: left; margin-top: 44rpx; line-height: 62rpx; font-weight: bold; font-size: 35rpx; color:#FFF;}
.information_num{width: calc(100% - 228rpx); margin-left: 17.5rpx; height: 52.5rpx; float: left; line-height: 44rpx; font-weight: 350; font-size: 26.5rpx; color:#FFF; }
.classify{width: 100%; height: 149rpx; float: left; background-color: #f4f5f4;}
.classifyFixed{position: fixed; top: 105rpx; z-index: 999;}
.scroll1{width: 100%; height: 100%; padding: 17.5rpx; white-space: nowrap;}
.classify_item { display: inline-block; width: 25%; height: 105rpx;}
.itemBox{width: 100%; height: 100%; float: left;}
.itemBox_title{width: 80%; height: 62rpx; text-align: center; font-size: 33.25rpx; font-weight: bolder; color: #666666; line-height: 73.5rpx; float: left; margin-left: 10%;}
.itemBox_type{width: 80%; height: 33.25rpx; text-align: center; float: left; color: #8a8a8a; margin-left: 10%; line-height: 33.25rpx; font-size: 24rpx; font-weight: 350; background-color: none;}
.itemBoxCheck_title{color: #404040;}
.itemBoxCheck_type{background-color: #fe0e2f; color:#fff;  border-top-left-radius: 17.5rpx; border-bottom-right-radius: 17.5rpx;}
.other{width: 100%; height: auto; min-height: 175rpx; float: left;}
.other_information{width: calc(100% - 35rpx); height: 104rpx; float: left; margin-left: 17.5rpx; border-radius: 21rpx 21rpx 0rpx 0rpx; background: linear-gradient(to right,#ffe0bc,#fea859);}
.businessLicense{width: auto; float: left; margin-left: 35rpx; margin-top:24rpx; height: 35rpx; background-color: #fe0e2f; border-radius: 6rpx; padding-right: 2rpx;}
.businessLicense image{width: 25rpx; height: 25rpx; float: left; margin:6rpx 12rpx 6rpx 12rpx;}
.businessLicense text{background-color: #FFF; height: 32rpx; border-radius: 0rpx 6rpx 6rpx 0rpx; float: left; margin-top: 2rpx; width: auto; line-height: 36rpx; font-size: 24rpx; background-color: #FFF; color: #fe0e2f; padding: 0px 12rpx;}
.countDown{width: auto; float: right; margin-top: 19.5rpx; height: 42rpx; margin-right: 35rpx;}
.countDown image{width: 39rpx; height: 39rpx; float: left; margin-top: 2rpx;}
.countDownTitle{width: auto; float: right; height: 42rpx; line-height: 24px; font-size: 30rpx; color: #fe0e2f;}
.countDownText{width: auto; height: 39rpx; font-size: 25rpx; margin: 1px 6rpx; padding: 0rpx 6rpx; border-radius: 6rpx; background-color: #fcf3c1;}
.serviceBox{width: calc(100% - 35rpx); height: auto; margin-top:-24rpx; float: left; margin-left: 17.5rpx; border-radius: 30rpx; background-color: #fff;}
.Basics{width: calc(100% - 70rpx); height: auto; float: left; margin-left: 35rpx; padding: 30rpx 0rpx;}
.shipmentsBox{width: 100%; height: 39rpx; float: left;}
.serviceTitle{width: auto; height: 39rpx; line-height: 39rpx; font-size: 30rpx; float: left; color: #818181;}
.serviceContent{width: calc(100% - 98rpx); height: 39rpx; line-height: 39rpx; color: #424242; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 30rpx; float: left; margin-left: 16rpx;}
.serviceIcon{width: 25rpx; height: 25rpx; float: right; margin-top:8rpx;}
.serveBox{width: 100%; height: 39rpx; float: left;}
.serviceType{width: auto; float: left; height: 35rpx; font-size: 25rpx; line-height: 32rpx; margin-left: 16rpx; padding: 0px 10rpx; border-radius: 6rpx; margin-top: 2rpx; background-color: rgba(254,14,47,0.08); border:2rpx solid #fe0e2f; color: #fe0e2f;}
.activityBox{width: calc(100% - 70rpx); height: auto; float: left; margin-left: 35rpx; padding: 30rpx 0rpx; border-top:2rpx dashed #e2e2e2;}
.activityType{width: auto; float: left; height: 35rpx; font-size: 25rpx; line-height: 32rpx; margin-left: 16rpx; padding: 0px 10rpx; border-radius: 6rpx; margin-top: 2rpx; background-color: rgba(255,136,22,0.08); border:2rpx solid #ff8816; color: #ff8816;}
.activityContent{width: 50%; height: 39rpx; line-height: 39rpx; color: #424242; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 27rpx; float: left; margin-left: 16rpx;}

.sortBox{width: 100%; height: 87.5rpx; float: left; padding: 17.5rpx; background-color: #f4f5f4;}
.sortFixed{position: fixed; top: 254rpx; z-index: 999;}
.sortItem{width: 25%; height: 100%; float: left; display: flex; justify-content: center; align-items: center;}
.sortItem text{font-size:27rpx; color: #888888;}
.sortCheck text{font-weight: bolder; color: #363636;}
.sortItem_icon{width: 32rpx; height: 32rpx; margin-left:6rpx; border-radius: 32rpx; background-color: #fff;}
.sortItem_icon image{width: 17.5rpx; height: 17.5rpx; float: left; margin-top: 7rpx; margin-left: 7rpx;}

.content{width: calc(100% - 35rpx); margin-left: 17.5rpx; float: left;}
.otherFixed{margin-top: 150rpx;}
.contentFixed{margin-top: 87.5rpx;}

/* .popup-content{height: auto;} */
.popup_content_title{width: 100%; padding-top: 35rpx; padding-bottom: 17.5rpx; float: left; text-align: center; line-height: 87.5rpx; font-size: 34rpx; color: #444444; font-weight: bold;}
.popup_content_content{width: 100%; color: #797979; line-height: 42rpx; padding:17.5rpx 35rpx 35rpx 35rpx; height: auto; float: left; font-size: 44rpx;}
.popup_content_button{width: 75%; background-color: rgba(254,14,47,0.8); height: 87.5rpx; text-align: center; font-size: 34rpx; line-height: 87.5rpx; border-radius: 44rpx; color: #fff; font-weight: 350; margin-top: 17.5rpx; margin-bottom: 87.5rpx; float: left; margin-left: 12.5%;}
</style>